<template>
  <view class="pagelist">
    <block v-for="item in list" :key="item.id">
      <view class="card" @click="() => handleItem(item)">
        <view class="image">
          <image class="image" mode="aspectFill" :src="item.img" />
          <view class="mask ellipsis-1">
            <view class="mask-date">活动时间：{{ item.sign_start_time }}</view>
          </view>
        </view>
        <view class="text m-top-10">{{ item.title }}</view>
        <view class="date">
          <image class="clock m-right-8" src="@/static/icons/clock.png" />
          {{ `${item.active_start_time} ~ ${item.active_end_time}` }}
        </view>
      </view>
    </block>
  </view>
</template>

<script setup lang="ts">
defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});

// 定义方法
const emit = defineEmits(['itemclick']);

const handleItem = (item: any) => {
  emit('itemclick', item);
};
</script>

<style lang="scss" scoped>
.pagelist {
  background: $backColor;
  .card {
    &:not(:last-of-type) {
      margin-bottom: 20rpx;
    }
    background: white;
    padding: 35rpx 30rpx 20rpx;
    position: relative;
    .hot-icon.position {
      top: -30rpx;
      left: -16rpx;
    }
    .image {
      position: relative;
      width: 100%;
      height: 320rpx;
      border-radius: 20rpx;
      overflow: hidden;
      .mask {
        width: 100%;
        height: 60rpx;
        position: absolute;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        &-date {
          font-size: $fs-28;
          color: #ffffff;
          line-height: 60rpx;
          padding: 0 32rpx;
        }
      }
    }
    .text {
      font-size: $fs-34;
      color: $title;
      font-weight: bold;
    }
    .date {
      text-align: right;
      color: $sub;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .clock {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
</style>
